<template>
  <el-drawer
    title="编辑用户"
    :visible.sync="visible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :wrapperClosable="false"
    :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="form.realName"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="userTel">
          <el-input v-model="form.userTel"></el-input>
        </el-form-item>
        <el-form-item label="组织" prop="orgId">
          <el-select
            v-model="form.orgId"
            placeholder="请选择组织"
            clearable
            class="select-width"
          >
            <el-option
              v-for="item in orgList"
              :key="item.orgId"
              :label="item.orgName"
              :value="item.orgId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="form.roleId"
            placeholder="请选择角色"
            clearable
            multiple
            class="select-width"
          >
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE, PLEASE_INPUT, PLEASE_SELECT } from "@/util/constant";
import { getUserDetailApi, updateUserApi } from "@/api/modules/user.api";
import { getRoleApi } from "@/api/modules/role.api";
import { getOrgListApi } from "@/api/modules/org.api";

export default {
  props: ["id"],
  data() {
    return {
      visible: false,
      form: {
        realName: "",
        userTel: "",
        orgId: "",
        roleId: "",
        username: "",
        verifyPassword: "",
        permission: "",
      },
      page: {
        pageNum: 1,
        pageSize: 100,
      },
      drawerSize: DRAWER_SIZE,
      orgList: [],
      roleList: [],
      role: [],
      rules: {
        realName: [{ required: true, message: PLEASE_INPUT, trigger: "blur" }],
        orgId: [{ required: true, message: PLEASE_SELECT, trigger: "blur" }],
        roleId: [{ required: true, message: PLEASE_SELECT, trigger: "blur" }],
        username: [{ required: true, message: PLEASE_INPUT, trigger: "blur" }],
      },
    };
  },
  methods: {
    async init(id) {
      this.role = [];
      const role = await getRoleApi(this.page);
      const org = await getOrgListApi(this.page);
      const res = await getUserDetailApi(id);
      this.roleList = role.records;
      this.orgList = org.records;
      this.form.realName = res.realName;
      this.form.userTel = res.userTel;
      this.form.username = res.username;
      this.form.orgId = res.orgId;
      this.form.userId = res.userId;
      res.roleList?.forEach((item) => {
        this.role.push(item.roleId);
      });
      this.form.roleId = this.role;
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    handleAdd() {
      this.form.userStatus = 0;
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await updateUserApi(this.form);
          this.$message({
            message: "成功",
            type: "success",
          });
          this.visible = false;
          this.$emit("getParentTableData");
        }
      });
    },
  },
};
</script>
<style scoped>
.select-width {
  width: 100%;
}
</style>
